<template>
  <!--   <div class="driving__school"> -->
         <!--   <section class="coombo_title">
               附近练车点
           </section> -->
         <!--   <section> -->
                <div>
                   <div class="drivingitem"  v-for="(item,index) in drivingData">
                        <div class="active" v-show="ishow">
                            <img src="./images/schoolchecked.png" />
                        </div>
                        <div class="pic">
                            <img :src="item.logo" alt=""/> 
                        </div>
                        <div class="info">
            
                            <div class="title">
                                 <div class="name">
                                    {{ item.name.length <=7 ? item.name : (item.name).substring(0,7)+"..." }}
                                 </div>
                                 <div class="distance">
                                    {{ item.distancetext}}
                                 </div>
                            </div>

                            <div class="desc">
                                  {{item.short_depict}}
                            </div>

                            <div class = "starsection">
                                <v-star :star="parseInt(item.star)"></v-star>
                           </div>
                          
                       </div>

                   </div>
               </div>    
  <!--          </section>
          
    </div> -->
</template>

<script>
    import Star from '../../component/starts/stars.vue';
    export default {
        data() {
            return {
                star:"",
            }
        },
        components:{
            "v-star":Star,
        }, 
        props:['drivingData',"ishow"],
        
       
    }

</script>

<style lang="scss" scoped>
    @import 'src/common/styles/mixins';
   .driving__school{
    background: #f0f0f0;
    padding: px2rem(15) px2rem(20);
       .coombo_title{
        background: #ffffff;
        font-size: px2rem(28);
        color: #666666;
        padding: px2rem(15) px2rem(30);
      }
   }
 .drivingitem{
      position:relative;
      border-top:px2rem(2) solid #e9e9e9;
      padding:px2rem(42) px2rem(35);
      background: #fff;
        @extend %flexbox;
      .checked{
        
      }
      .active{
        width: px2rem(46);
        height: px2rem(46);
        position: absolute;
        right: 0;
        bottom:px2rem(5);
        img{
          width:100%;
        }
      }
   
        .pic{
          width: px2rem(158);
          height: px2rem(158);
          img{
            width: 100%;
          }
        }
        .info{
          @include flex(1);
          padding-left:px2rem(35);
          .title{
            
            @extend %flexbox;
            .name{
              font-size: px2rem(36);
              color:#333;
            }
            .distance{ 
              font-size: px2rem(24);
              color:#fa5800;
              @include flex(1);
              text-align: right;
            }
          }
          .desc{
            font-size: px2rem(26);
            color:#999;
            padding-top:px2rem(20);
            line-height: 1.5;

          }
          .starsection{
            padding-top:px2rem(10);
          }
        }
 }
 



</style>
